<template>
  <div>
    <div style="height: 100%" :style="{width: windowWidth}">
      <el-row>
        <el-col :span="12" style="background-color: #dbf3f3" class="animate__animated" :class="panelLeft">
          <div class="grid-content bg-purple" :style="{height: windowHeight}" style="display: flex;justify-content: center;align-items: center;flex-direction: column">
            <p style="font-size: 4em; letter-spacing: 0.3em; margin-bottom: 0px; font-family: 华文琥珀">模拟数据生成平台</p>
            <p style="font-size: 2.2em; font-weight: lighter; margin-top: 10px; margin-bottom: 3em; margin-left: -0.8em">Simulation Data Generation Platform</p>
            <el-button @click="toMain()" type="primary"  round style="width: 180px; height: 70px; font-size: 1.3em;" class="animate__animated animate__bounceInLeft">快速体验 →</el-button>
          </div>
        </el-col>
        <el-col :span="12" class="animate__animated" :class="panelRight" style="background-color: #94e0e0">
          <div class="grid-content bg-purple-light" :style="{height: windowHeight}" style="display: flex;justify-content: center;align-items: center;">
            <div id="loginPanel">
              <div style="width: 70%">
                <div style="display: flex; align-items: center; ">
                  <h2 style="width: 60%">登录</h2>
                  <p style="width: 40%">
                    <span style="font-size: 0.9em">没有账号？</span>
                    <a style="font-size: 0.9em;" href="#" @click="drawer = true">点此注册</a>
                  </p>
                </div>
                <el-input v-model="account" placeholder="手机/邮箱"></el-input>
                <p></p>
                <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
                <p></p>
                <el-button id="loginButton" @click="login">登录</el-button>
                <p style="text-align: center; font-size: 0.9em"><a href="#">已有帐号，忘记密码？</a></p>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-drawer
        id="register_panel"
        title=""
        :visible.sync="drawer"
        :with-header="false"
        direction="btt"
        :before-close="handleClose"
        size="50%">
      <div style="width: 60%; height: 70%; border: #d7d7d7 dotted 3px">
      <h2 style="text-align: center; margin-top: 20px">注&nbsp;&nbsp;&nbsp;&nbsp;册</h2>
      <el-row id="register_panel__inner">
        <el-col :span="12">
          <div id="register_panel__inner__left">
            <p>
              <span><span style="color:red;">* </span>昵&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称：</span>
              <el-input v-model="username" placeholder="请输入昵称"></el-input>
            </p>
            <p>
              <span><span style="color:red;">* </span>邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱：</span>
              <el-input v-model="email" placeholder="请输入邮箱"></el-input>
            </p>
            <p>
              <span><span style="color:red;">* </span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：</span>
              <el-input v-model="registerPassword" placeholder="请输入密码" show-password>></el-input>
            </p>
            <p>
              <span><span style="color:red;">* </span>确认密码：</span>
              <el-input v-model="confirmPassword" placeholder="请输入确认密码" show-password>></el-input>
            </p>
          </div>
        </el-col>
        <el-col :span="12">
          <div id="register_panel__inner__right">
            <p>
              <span>验证码：</span>
              <el-input v-model="code" placeholder="请输入验证码" style="width: 30%; margin-right: 20px"></el-input>
              <el-button style="width: 110px" @click="getCode">{{ codeBtn }}</el-button>
            </p>
            <p>
              <el-button style="width: 65%" type="primary" @click="register">注册</el-button>
            </p>
          </div>
        </el-col>
      </el-row>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import {GET, POST, POSTData} from "@/util/HttpUtil";
import CommonUtil, {encryption} from "@/util/CommonUtil";
import router from "@/router";

export default {
  name: "HomePage",
  data(){
    return{
      windowHeight: (window.innerHeight < 937 ? 937 : window.innerHeight - 7) + 'px',
      windowWidth: (window.innerWidth < 1400 ? 1400 : window.innerWidth - 7) + 'px',
      account: '',
      password: '',
      registerPassword: '',
      confirmPassword: '',
      username: '',
      email: '',
      code: '',
      panelLeft: 'animate__slideInLeft',
      panelRight: 'animate__slideInRight',
      drawer: false,
      codeBtn: '获取验证码',
      waitTime: 0,
    }
  },
  beforeCreate() {
    window.onresize = ()=>{
      this.windowHeight = (window.innerHeight < 937 ? 937 : window.innerHeight) + 'px';
      this.windowWidth = (window.innerWidth  < 1400 ? 1400 : window.innerWidth) + 'px';
    }
  },
  mounted() {
    if(sessionStorage.getItem("isLogin") != undefined && sessionStorage.getItem("isLogin") == 0){
      this.$message.warning("请先登录！")
    }
  },
  methods:{
    toMain(){
      //修改class重新渲染触发动画效果
      this.panelLeft = 'animate__bounceOutLeft';
      this.panelRight = 'animate__bounceOutRight';
      setTimeout(()=>{
        this.$router.push("/GenerationPlatform");
      }, 500);
    },
    handleClose(done) {
      this.$confirm('取消注册？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    getCode(){
      if(this.waitTime > 0){
        return;
      }
      if(this.email == ''){
        this.$message.warning("邮箱不能为空");
        this.waitCodeBtn(5);
        return;
      }
      if(this.email.match(/.+[^@]@[^@].*[^\.][\.][^\.].+/) === null){
        this.$message.warning("邮箱格式错误");
        this.waitCodeBtn(5);
        return;
      }
      this.waitCodeBtn(60);
      GET("/api/common/vCode?to=" + this.email);
    },
    register(){
      if(CommonUtil.isEmpty(this.username, this.email, this.registerPassword, this.confirmPassword)){
        this.$message.warning("信息不齐全！");
        return;
      }
      if(this.registerPassword != this.confirmPassword){
        this.$message.warning("两次密码不一致");
        return;
      }
      POSTData(
          "/api/SysUser/register?code=" + this.code,
          {
            username: this.username,
            password: CommonUtil.encryption(this.code, this.registerPassword),
            email: this.email
          },
          (res)=>{
              this.$message({
                type: res.code == 200 ? 'success' : 'error',
                message: res.msg
              })
              this.code = '';
              this.email = '';
              this.registerPassword = '';
              this.confirmPassword = '';
              this.username = '';
              this.drawer = false;
          }
      );
    },
    waitCodeBtn(t){
      this.waitTime = t;
      this.codeBtn = this.waitTime + "s 后重试";
      let t1 = setInterval(()=>{
        this.waitTime = this.waitTime - 1;
        this.codeBtn = this.waitTime + "s 后重试";
        if(this.waitTime == 0){
          clearInterval(t1);
          this.codeBtn = '获取验证码';
        }
      }, 1000);
    },
    login(){
      if(CommonUtil.isEmpty(this.account, this.password)){
        this.$message.warning("账号或密码不能为空！")
        return;
      }
      POSTData(
          "/api/SysUser/login",
          {
            email: this.account,
            password: CommonUtil.encryption(this.account, this.password)
          },
          (res)=> {
            if (res.code == 200) {
              let token = res.data.authorization;
              sessionStorage.setItem("authorization", token);
              sessionStorage["isLogin"] = 1;
              this.$message.success(res.msg);
              this.$router.push("/GenerationPlatform/generate");
            } else {
              this.$message.error(res.msg)
            }
          }
      )
    }
  }
}
</script>

<style scoped>
#loginPanel{
  width: 60%;
  height: 40%;
  background-color: #d6f6f6;
  border-radius: 2em;
  box-shadow: #56b4b4 10px 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column
}

#loginButton{
  width: 100%;
  font-size: 1.1em;
  background-color: #cdb998;
  font-weight: bold;
  letter-spacing: 1em;
  color: #5c687d;
}

a{
  text-decoration: none
}

#register_panel__inner p{
  display: flex;
  align-items: center;
}

#register_panel__inner .el-input{
  width: 65%;
}

#register_panel__inner__left p{
  justify-content: flex-end;
}

#register_panel__inner__left{
  padding-right: 30px;
  border-right: rgba(160, 160, 160, 0.49) dotted 2px;
}

#register_panel__inner__right{
  padding-top: 40px;
  margin-left: 50px;
}
</style>
<style>
#register_panel .el-drawer__body{
  background-color: #d6f6f6!important;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>